// 维保记录
<template>
    <f7-page class="hntsh">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>维保记录</f7-nav-title>
            <f7-nav-right>
            </f7-nav-right>
        </f7-navbar>
        <div class="content-list">
            <div class="hear-bg">
                <div class="content-box">
                    <img width="46" :src="require(`../../../../assets/img/qzjx/${info.equipmentType?info.equipmentType:'empty'}.png`)" alt=""
                        class="left-box">
                    <div class="right-box">
                        <div class="title-box">
                            <h3>{{ info.propertyCode }} <span v-if="info.workSiteCode"
                                    style="color:#8995AC;font-size:14px;">【{{
                                        info.workSiteCode }}】</span>
                            </h3>
                        </div>
                        <p>{{ info.engineeName || '--' }}</p>
                    </div>
                </div>
            </div>
            <v-accordion title="维保记录" class="infoList">
                <f7-list media-list class="search-list" v-if="info.eqmRepairList.length > 0">
                    <li v-for="(item, index) in info.eqmRepairList" :key="index"  @click="detail(item)">
                        <span>{{ showTime1(item.repairTime) }}</span>
                        <span class="tag" :class="item.repairStatus != 4 ? 'tag-yellow' : ''">{{
                            statusText(item.repairStatus)
                        }}</span>
                    </li>
                </f7-list>
                <v-empty v-else description="暂无数据" />
            </v-accordion>
            <f7-toolbar position="bottom" no-shadow class="fff" v-if="info.isRepairUnit">
                <f7-button fill class="submit-btn" @click="goPlan()">登记维保计划</f7-button>
            </f7-toolbar>
        </div>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/workflowController"
export default class instance extends controller {
    mixin () {
        return {
            data () {
                return {
                    info: {
                        equipmentType: "TSQZJ",
                        eqmRepairList: [],
                    },
                };
            },
            computed: {
            },
            mounted () {
                this.getData()
            },
            methods: {
                showTime1 (date) {
                    if (date) {
                        return formatter.formatDate(date, "yyyy-MM-dd");
                    } else {
                        return "--"
                    }
                },
                statusText (val) {
                    if (val == 0) {
                        return "待入场"
                    } else if (val == 1) {
                        return "待认证"
                    } else if (val == 2) {
                        return "现场情况"
                    } else if (val == 3) {
                        return "待审核"
                    } else {
                        return "已完成"
                    }
                },
                getData () {
                    this.$f7.request.post(
                        `/app/equipment/eqmRepair/getEqmRepairById`,
                        {
                            propertyId: this.$f7route.query.propertyId,
                            engineeId: this.$f7route.query.engineeId
                        },
                        (r) => {
                            r = JSON.parse(r);
                            if (r && r.success) {
                                console.log(r, 11)
                                this.info = r.parameters;
                            } else {
                                this.$toast(r.message || "网络错误，请稍后重试");
                            }
                        }
                    );
                },
                goPlan () {
                    this.$f7router.navigate(
                        `/business/qzjx/maintenance/create?pageAction=create`
                    );
                },
              // 详情
              detail(item) {
                this.$f7router.navigate(
                    `/business/qzjx/maintenance/create?pageAction=edit&repairId=${item.repairId}&useId=${item.useId}`
                )
              },
            },
        };
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/qualityCreate.less');
@deep: ~">>>";

@{deep} .page-content {
    padding-top: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F3F7 100%);
}

.hntsh {
    .content-list {
        padding: 44px 0 50px;
    }

    @{deep} .toolbar,
    @{deep}.navbar {
        position: fixed;
    }

    .infoList {
        margin: 30px 16px 10px;
        background: #FFFFFF;
        box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
        border-radius: 8px;
        border: 2px solid #FFFFFF;
    }
}

.hear-bg {
    background: linear-gradient(180deg, #1990FF 0%, rgba(25, 144, 255, 0) 100%);
    height: 92px
}

.content-box {
    padding: 15px;
    margin: 0 16px 10px;
    font-size: 13px;
    background: linear-gradient(196deg, #EFF6FF 0%, #FFFFFF 100%);
    box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: flex-start;

    .right-box {
        word-break: break-all;
        flex: 1;
        margin-left: 10px;

        .title-box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            h3 {
                color: #242424;
                font-size: 16px;
                flex: 1;
                margin: 5px 0 10px;
            }

            .status {
                font-size: 13px;
                color: #61677A;
            }

            .status-yellow {
                color: #FF9F24;
            }
        }

        span {
            flex-shrink: 0;

            &.tag.tag-fill {
                background: rgba(115, 125, 138, 0.1);
                color: #61677A;
                border: none;
            }

            &.tag.tag-yellow {
                background: #fef7ee;
                color: #FF9534;
                border: none;
            }
        }

        p {
            color: #8995AC;
            font-size: 13px;
            margin: 0;

            span {
                color: #1990FF;
            }
        }
    }
}


.search-list li {
    margin: 0 15px;
    padding: 15px 0;
    font-size: 14px;
    color: #333;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E9EDF7;

    &:first-child {
        padding-top: 0;
    }

    &:last-child {
        border-bottom: none;
    }

    .tag {
        font-size: 13px;
        background: #fff;
        color: #61677A;
        border: none;
    }

    .tag-yellow {
        color: #FF9F24;
    }
}
</style>
